function myVue(options) {
    this._init(options)
}
myVue.prototype._init = function (options) {
    this.$options = options
    this.$data = options.data
    this.$methods = options.methods
    this.$el = document.querySelector(options.el)

    this._binding = {}
    this._observe(this.$data)
    this._compile(this.$el)
}
/* 给data添加监听 */
myVue.prototype._observe = function (obj) {
    var _this = this
    Object.keys(obj).forEach(function (key) {
        _this._binding[key] = {
            /* 一个数据可能有多出绑定 */
            _directives: []
        }
        var value = obj[key]
        if (typeof value === "object") {
            _this._observe(value)
        }
        var binding = _this._binding[key]
        Object.defineProperty(_this.$data, key, {
            enumerable: true,
            configurable: true,
            get: function () {
                return value
            },
            set: function (newVal) {
                if (value !== newVal) {
                    value = newVal
                    binding._directives.forEach(function (item) {
                        item.update()
                    })
                }

            }
        })
    })
}
/* 解析页面上的指令，添加Wathcer */
myVue.prototype._compile = function (root) {
    var _this = this
    var nodes = root.children
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i]
        if (node.children.length) this._compile(node)

        if (node.hasAttribute("v-click")) {
            node.onclick = (function () {
                var attrVal = nodes[i].getAttribute("v-click")
                return _this.$methods[attrVal].bind(_this.$data)
            })()
        }
        if (node.hasAttribute("v-model") && (node.tagName == "INPUT" || node.tagName == "TEXTAREA")) {
            node.addEventListener('input', (function (key) {
                var attrVal = node.getAttribute("v-model")
                _this._binding[attrVal]._directives.push(new Watcher("input", node, _this, attrVal, "value"))
                return function () {
                    _this.$data[attrVal] = nodes[key].value
                }
            })(i))
            if (node.hasAttribute("v-bind")) {
                var attrVal = node.getAttribute("v-bind")
                _this._binding[attrVal]._directives.push(new Watcher("text, ", node, _this, attrVal, 'innerHTML'))
            }
        }
    }
}
function Watcher(name, el, vm, exp, attr) {
    this.name = name
    this.el = el
    this.vm = vm
    this.exp = exp
    this.attr = attr
    this.update()
}
Watcher.prototype.update = function () {
    this.el[this.attr] = this.vm.$data[this.exp]
} 
var dom = document.querySelector(".box1")
dom.addEventListener("click", (function(e){
    console.log(11,e)
    return function(){
        console.log(1231)
    }
})())